<template>
  <el-scrollbar style="height: 100%">
    <el-collapse v-model="activeNames" class="margin-lr-xs">
      <el-collapse-item title="病人类型" name="1">
        <div>
          <el-checkbox-group v-model="patTypeSelections" size="small" @change="checkBoxChangeEvent">
            <el-checkbox :value="m.code" :label="m" border v-for="(m,i) in patTypeList" :key="i">{{m.name}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-collapse-item>
      <el-collapse-item title="是否急诊" name="2">
        <div>
          <el-checkbox-group v-model="urgentSelections" size="small" @change="checkBoxChangeEvent">
            <el-checkbox border :value="m.code" :label="m" v-for="(m,i) in isUrgentList" :key="i">{{m.name}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-collapse-item>
      <el-collapse-item title="样本类型" name="3">
        <vxe-toolbar class-name="light">
          <template #buttons>
            <span class="text-bold text-shadow">操作</span>
          </template>
          <template #tools>
            <el-checkbox class="text-bold text-blue" label="全选/取消全选" @change="checkBoxChangeEvent" />
          </template>
        </vxe-toolbar>
        <div class="cu-list">
          <el-checkbox-group v-model="sampleTypeSelections" size="small" class="grid" @change="checkBoxChangeEvent" style="display: flex;flex-wrap: wrap;">
            <el-checkbox class="margin-top-xs" style="width: 25%;" :label="m" border v-for="(m,i) in sampleTypeList" :key="i">{{m.sampleTypeName}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-collapse-item>
      <el-collapse-item title="分管类别" name="4">
        <vxe-toolbar class-name="light">
          <template #buttons>
            <span class="text-bold text-shadow">操作</span>
          </template>
          <template #tools>
            <el-checkbox class="text-bold text-blue" label="全选/取消全选" @change="checkBoxChangeEvent" />
          </template>
        </vxe-toolbar>
        <div class="cu-list">
          <el-checkbox-group v-model="barcodeTypeSelections" size="small" class="grid" @change="checkBoxChangeEvent" style="display: flex;flex-wrap: wrap;">
            <el-checkbox class="margin-top-xs" style="width: 25%;" :label="m" border v-for="(m,i) in barcodeTypeList" :key="i">{{m.barcodeNa}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-collapse-item>
    </el-collapse>
  </el-scrollbar>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { ref, reactive, onMounted, getCurrentInstance, watch, PropType } from 'vue';
import { VXETable, VxeFormPropTypes, VxeButtonEvents } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '../../../utils/CommonMessage';
import { AppStore } from '../../../stores/store';
import { funBdsJsResult } from '@/utils/Expression'; //函数公式
import SelectDataList from '@/components/SelectDataList.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { Action } from 'element-plus';
let store = AppStore();
// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

let showInterface = ref(false); //是否有界面
let showProcessAttValue = ref(false); //是否标本退回

const formRef = ref(); //表单ref标记
// 表单绑定的数据
let formData = reactive({
  id: '' /*主键*/,
  name: '' /*编号*/,
  snode: '' /*名称*/,
  enode: '' /*节点对应的界面路径*/,
  rptGroup: 0 /*序号*/,
  barcodeType: '' /*界面名称*/,
  feeItem: '' /*界面名称code*/,
  sampleType: false /*是否有生成交接单功能*/,
  patType: false /*是否有打印交接单功能*/,
  isUrgent: false /*是否有界面*/,
  minNum: false /*是否计费*/,
  maxNum: false /*是否系统节点*/,
  sTime: false /*是否有标本回退功能*/,
  eTime: '' /*标本回退对应的值*/,
  preWarnTime: '' /*组织机构id*/,
  warnTime: false,//状态码
  isTat: false/**是否启用TAT监控 */
});
let activeNames = ref('1');/**当前活动折叠面板 */
let checkboxGroup1 = ref('');/**选中 */
let patTypeList = reactive([{ code: '1', name: '门诊' }, { code: '2', name: '急诊' }, { code: '3', name: '住院' }, { code: '4', name: '体检' }]);/**病人类型 */
let patTypeSelections = ref([]);/**病人类型返回 */
let isUrgentList = reactive([{ code: 0, name: '否' }, { code: 1, name: '是' }]);/**是否急诊 */
let urgentSelections = ref([]);/**是否紧急返回 */
let sampleTypeList = reactive([]);/**标本类型 */
let sampleTypeSelections = ref([]);/**是否紧急返回 */
let barcodeTypeList = reactive([]);/**分管类别 */
let barcodeTypeSelections = ref([]);/**是否紧急返回 */
// 表单校验规则
const formRules = reactive<VxeFormPropTypes.Rules>({
  code: [{ required: true, message: '请输入编码' }],
  nodeName: [{ required: true, message: '请输入名称' }]
});

let showErrorPage = ref(false); //选择界面
let showErrorFunc = ref(false); //选择功能

const EditExtraPropertiesRef = ref(null); //配置扩展属性弹框ref
// const collapseStatus = ref(false);

//暴露属性和方法
defineExpose({
  addNew,
  saveForm,
  clearFormData
});

// 父组件传值
let props = defineProps({
  currentRow: { type: Object as PropType<any>, required: true }
}) as any;
watch(
  () => props.currentRow,
  (nval, oval) => {
    Object.assign(formData, nval);
    // for (const key in nval) {
    //   if (Object.prototype.hasOwnProperty.call(nval, key)) {
    //     const element = nval[key];
    //     formData[key] = element;
    //   }
    // }
  },
  {
    deep: true,
    immediate: true
  }
);

onMounted(() => {
  findSampleTypeList();
  findBarcodeTypeList();
});

// 方法定义区 =============
function addNew() {
  clearFormData(); // 清空表单
}

//**判断为空*/
function IsEmpty(value: any) {
  if (value === undefined || value === '' || value === null) {
    return true;
  }
  if (JSON.stringify(value) === '{}') {
    return true;
  }
  return false;
}

//是否有界面
function switIsInterfaceCreatReceipt(val) {
  //暂无业务逻辑
  if (!val) {
    formData.nodeUrl = '';
    formData.nodeUrlName = '';
    formData.interfaceCode = '';
  }
}
//是否标本退回
function handleSwitchChange(val) {
  if (!val) {
    formData.rollbackValue = '';
  }
}

//选择界面
function selectRow(row) {
  formData.nodeUrl = row.url;
  formData.nodeUrlName = row.name;
  formData.interfaceCode = row.code;
}

//清空界面
function clearRow() {
  formData.nodeUrl = '';
  formData.nodeUrlName = '';
  formData.interfaceCode = '';
}

//选择功能
function genusCodeSelect(row) {
  // console.log('rwew', row);

  formData.rollbackValue = row.value;
  //formData.assemblyName = row.name;
}
//清空功能
function genusCodeClear() {
  formData.rollbackValue = '';
  //formData.assemblyName = '';
}

// 自动生成助记符
// function autoInputCode() {
//   formData.inputCode = funBdsJsResult('firstPinYinFun', formData.germNa);
// }

// 清空表单
function clearFormData() {
  formData.id = '' /*主键*/;
  formData.code = '' /*编号*/;
  formData.nodeName = '' /*名称*/;
  formData.nodeUrl = '' /*节点对应的界面路径*/;
  formData.seq = 0 /*序号*/;
  formData.nodeUrlName = '' /*界面名称*/;
  formData.interfaceCode = '' /*界面名称code*/;
  formData.isCreatReceipt = false /*是否有生成交接单功能*/;
  formData.isPrintReceipt = false /*是否有打印交接单功能*/;
  formData.isInterface = false /*是否有界面*/;
  formData.isBilling = false /*是否计费*/;
  formData.isSysAtt = false /*是否系统节点*/;
  formData.isRollback = false /*是否有标本回退功能*/;
  formData.rollbackValue = '' /*标本回退对应的值*/;
  formData.orgId = '' /*组织机构id*/;
  formData.isShowState = false;
  formData.isTat = false;/**是否启用TAT监控 */
}

const openPage = () => {
  ElMessageBox.alert('请选择界面', '提示', {
    confirmButtonText: '确定'
  });
};
const openFunc = () => {
  ElMessageBox.alert('请选择功能', '提示', {
    confirmButtonText: '确定'
  });
};

// 保存
function saveForm(callback: any) {
  const el: any = proxy.$refs['formRef'];
  formRef.value?.validate((valid: any) => {
    if (!valid) {
      VxeMessage('校验表单失败', VxeNotifyType.error);
      return false;
    }
    if (formData.isInterface === true && !formData.nodeUrl) {
      openPage();
      showErrorPage.value = true;
      return false;
    }
    if (formData.isRollback === true && !formData.rollbackValue) {
      openFunc();
      showErrorFunc.value = true;
      return false;
    }

    let url = '';
    formData.orgId = store.userInfo.orgId;
    // 判断添加和编辑接口
    if (IsEmpty(formData.id)) {
      url = '/lab/process/set/addProcessInfo';
    } else {
      url = '/lab/process/set/updateProcessInfo';
    }
    proxy.$http
      .post(url, formData)
      .then((res: any) => {
        if (res.status.code === 1) {
          if (!IsEmpty(formData.id)) {
            proxy.$emit('getProcessSetList');
            VxeMessage('修改成功', VxeNotifyType.success);
          } else {
            proxy.$emit('getProcessSetList');
            VxeMessage('新建成功', VxeNotifyType.success);
          }
          if (callback) {
            callback(true);
          }
        } else {
          if (!IsEmpty(formData.id)) {
            proxy.$emit('getProcessSetList');
            VxeMessage('修改失败', VxeNotifyType.error);
          } else {
            proxy.$emit('getProcessSetList');
            VxeMessage('新建失败', VxeNotifyType.error);
          }
          if (callback) {
            callback(false);
          }
        }
      })
      .catch((err: any) => {
        VxeMessage('新建异常', VxeNotifyType.error);
        if (callback) {
          callback(false);
        }
      });
  });
}
/**新建事件 */
function saveEvent() {
  //todo
}
/**获取标本类型 */
function findSampleTypeList() {
  sampleTypeList.length = 0; //放入数据前清空数据
  const url = '/api/lab/labSampleType/findSampleTypeList';
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: { keyWords: '', } })
    .then(async (res: any) => {
      sampleTypeList.push(...res.data);
    })
    .catch((err: any) => {
      VxeMessage('获取样本类型列表数据异常', VxeNotifyType.error);
    });
}
/**获取条码类别 */
function findBarcodeTypeList() {
  barcodeTypeList.length = 0; //放入数据前清空数据
  const url = '/api/lab/labbarcodetype/findBarCodeTypeList';
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: { keyWords: '', } })
    .then(async (res: any) => {
      barcodeTypeList.push(...res.data);
    })
    .catch((err: any) => {
      VxeMessage('获取分管类别列表数据异常', VxeNotifyType.error);
    });
}
/**选择改变事件 */
function checkBoxChangeEvent() {
  proxy.$emit('changeEvent', { patTypeArr: patTypeSelections, isUrgentArr: urgentSelections, sampleTypeArr: sampleTypeSelections, barCodeTypeArr: barcodeTypeSelections });
}
</script>

<style lang="scss" scoped>
// 中等尺寸时 配置扩展属性按钮
.el-button--default {
  padding: 5px 11px;
}

.el-tag {
  color: $base-white;
}
.error-message {
  color: red;
  margin: -9px 4px;
}
</style>
